<template name="multisigCreate">
  <!-- error modal where weights/threshold invalid-->
  <div class="small ui modal" id="checkWeightsModal">
    <div class="header">Multisig Wallet Generation</div>
    <div class="content">
      <div class="ui warning icon message">
        <i class="warning icon"></i>
        <div>
          <div class="header">
            Lorum ipsum
          </div>
          <p>Delit simplur</p>
        </div>
      </div>
    </div>
    <div class="actions">
      <div class="ui approve red button">Close</div>
    </div>
  </div>
  <!-- error modal where node returns invalid response  -->
  <div class="small ui modal" id="invalidNodeResponse">
    <div class="header">WARNING - Bad Response</div>
    <div class="content">
      <div class="ui warning icon message">
        <i class="warning icon"></i>
        <div class="content">
          <div class="header">
            WARNING - The node you've requested this transaction from replied
            with bad data that doesn't match your intended transaction
            parameters.
            <br /><br />
            This transaction has been cancelled automatically to protect your
            funds.
            <br /><br />
            Please report this issue through a Github issue, or directly to the
            QRL Team via email: info@theqrl.org
          </div>
          <p></p>
        </div>
      </div>
    </div>
    <div class="actions">
      <div class="ui approve green button">Okay</div>
    </div>
  </div>

  <div id="generateTransactionArea">
    <p><strong>Creator:</strong> {{ creator }}</p>
    <div class="ui stackable two column grid">
      <div class="six wide column">
        <div id="transferRecipients">
          <div>
            <div class="field">
              <label>Signatory</label>
              <div
                class="ui action center aligned input"
                id="amountFields"
                style="width: 100%; margin-bottom: 10px;"
              >
                <input
                  type="text"
                  id="to_1"
                  name="to[]"
                  placeholder="Address"
                  autocomplete="off"
                  style="width: 55%;"
                />
                <input
                  type="text"
                  id="amounts_1"
                  name="amounts[]"
                  autocomplete="off"
                  placeholder="Weight"
                  style="width: 30%;"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="field">
          <button
            id="addTransferRecipient"
            class="ui small button sky"
            style="width: 100%"
          >
            <i class="add user icon"></i>
            Add Another Signatory
          </button>
        </div>
      </div>
      <div class="six wide column">
        <div class="ui form">
        <div class="field">
          <label>Threshold to spend</label>
          <div class="ui action center aligned input">
            <input
              type="text"
              id="threshold"
              name="threshold"
              placeholder="Threshold"
              autocomplete="off"
              style="width: 100%;"
            />
          </div>
        </div>
        <div class="field">
          <label>Fee (In Quanta)</label>
          <div class="ui action center aligned input">
            <input
              type="text"
              id="fee"
              value="0.1"
              autocomplete="off"
              style="width: 100%;"
            />
          </div>
        </div>
        <div class="field">
          <label>OTS Key Index</label>
          <div class="ui action center aligned input">
            <input
              type="text"
              id="otsKey"
              placeholder="0"
              value="{{ otsKeyEstimate }}"
              autocomplete="off"
              {{ledgerWalletDisabled}}
              style="width: 100%;"
            />
          </div>
        </div>

        <div class="field">
          <div class="ui warning icon message" style="display: inline-flex;">
            <i class="warning icon"></i>
            <div class="content">
              <div class="header">
                OTS Key Index Warning
              </div>
              {{#if isLedgerWallet}}
              <p>
                The <strong>OTS (One Time Signature)</strong> Key Index in the
                field above is based on data provided by your Ledger Device. You
                should <b>never</b> re-use the same OTS Key for more than 1
                transaction. As you are using a Ledger Device, you can rest
                assured your Device will keep track of all used signatures for
                you. As a result, you cannot change the OTS Key that will be
                used to sign this transaction as the Ledger Device will
                automatically use the next one in line.
              </p>
              {{else}}
              <p>
                The <strong>OTS (One Time Signature)</strong> Key Index in the
                field above is estimated based on data provided by the QRL node
                you're connected to. You should <b>never</b> re-use the same OTS
                Key for more than 1 transaction. If you are unsure, it is safest
                to write down all used OTS Key Indexes, and store them in a safe
                place.
              </p>
              {{/if}}
            </div>
          </div>
        </div>

        <div class="ui stackable one column grid">
          <div class="column center aligned">
            <button
              id="generateTransaction"
              class="ui huge primary button red"
              style="width: 100%"
            >
              Confirm
            </button>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Confirm Transaction Area -->
  <div id="confirmTransactionArea" style="display: none;">
    <div class="ui icon message transactionRecord">
      <img class="transactionTypeImage" src="/img/icons/send.png" />
      <div class="content">
        <div class="header">
          Confirm Multisig Wallet Creation
        </div>
      </div>
    </div>

    <h4 class="ui horizontal divider header">
      <i class="file icon"></i>
      Transaction Details
    </h4>

    <form>
      <div class="field">
        <h4>Signatories</h4>
        <table class="ui table">
          <thead><th>Address</th><th>Weight</th></thead>
          <tbody>
            {{#each transactionConfirmation.outputs}}
            <tr>
            <td>{{# if bech32}}{{ this.address_b32 }}{{else}}{{ this.address_hex
            }}{{/if}}</td>
            <td>{{ this.weight }}</td>
            </tr>
            {{/each}}
          </tbody>
          <tfoot>
            <th>Threshold for spend</th>
            <th><a class="ui">{{ thresholdForSpend }}</a></th>
          </tfoot>
        </table>
      </div>
    </form>

    <div class="ui stackable one column grid">
      <div class="column">
        <br />
        <span>Fee <a class="ui">{{ transactionConfirmationFee }}</a> Quanta</span>
        <br />
        <span>OTS Key Index
          <a class="ui">{{ transactionConfirmation.otsKey }}</a>
        </span>
      </div>
    </div>

    <div class="ui stackable one column grid">
      <div class="column center aligned">
        <button
          id="confirmTransaction"
          class="ui huge primary button red"
          style="width: 100%"
        >
          {{#if isSeedWallet}}
          Click to Send
          {{else}}
          Sign with Ledger
          {{/if}}
        </button>
      </div>
    </div>

    <div id="relaying" class="ui icon message" style="display: none;">
      <br /><br />
      <i class="notched circle loading icon"></i>
      <div class="content">
        <div class="header">
          Just a moment
        </div>
        <p id="transferRelayingMsg">
          Your transaction is being relayed into the QRL network...
        </p>
      </div>
    </div>
  </div>
              <!-- Transaction Result Area -->
              <div id="transactionResultArea" style="display: none;">

                <div class="ui icon message transactionRecord">
                  <img class="transactionTypeImage" src="/img/icons/send.png" />
                  <div class="content">
                    <div class="header">
                      MultiSig Wallet Created<br><small>{{msaddress}}</small>
                    </div>
                  </div>
                </div>
      
                <h4 class="ui horizontal divider header">
                  <i class="file icon"></i>
                  Transaction Details
                </h4>

                <form>
                  <div class="field">
                    <h4>Signatories</h4>
                    <table class="ui table">
                      <thead><th>Address</th><th>Weight</th></thead>
                      <tbody>
                        {{#each transactionConfirmation.outputs}}
                        <tr>
                        <td>{{# if bech32}}{{ this.address_b32 }}{{else}}{{ this.address_hex
                        }}{{/if}}</td>
                        <td>{{ this.weight }}</td>
                        </tr>
                        {{/each}}
                      </tbody>
                      <tfoot>
                        <th>Threshold for spend</th>
                        <th><a class="ui">{{ thresholdForSpend }}</a></th>
                      </tfoot>
                    </table>
                  </div>
                </form>
      
                <div class="ui stackable one column grid">
                  <div class="column">
                    <br />
                    <span>Transaction Hash <a id="confirmedTransferTxnHash" href="{{nodeExplorerUrl}}/tx/{{transactionHash}}" target="_blank" class="ui wordBreak">{{transactionHash}}</a></span>
                    <br />
                    <span>Fee <a class="ui">{{transactionConfirmationFee}}</a> Quanta</span>
                    <br />
                    <span>OTS Key Index <a class="ui">{{transactionConfirmation.otsKey}}</a></span>
                  </div>
                </div>
      
                <div class="ui stackable one column grid">
                  <div class="column">
                    <p id="transferSuccessMessage" style="word-wrap: break-word; word-break: break-all;">
                      Success! Your transaction has been relayed into the QRL network through the following nodes, and is pending validation.
                    </p>
                  </div>
                </div>
      
      
                <div class="ui mini horizontal divided list">
                {{#each transactionRelayedThrough}}
                  <div class="item">
                    <i class="checkmark icon green"></i>
                    <div class="content">
                      <div class="header">{{this}}</div>
                    </div>
                  </div>
                {{/each}}
                </div>
      
                <div id="relaying" class="ui icon message">
                  <br /><br />
                  <i class="notched circle loading icon"></i>
                  <div class="content">
                    <div id="loadingHeader" class="header">
                      Just a moment
                    </div>
                    <p id="transferFinalTxnStatus" class="wordBreak" style="word-wrap: break-word; word-break: break-all;">Transaction Status: {{transactionStatus}}</p>
                  </div>
                </div>
      
                <div class="ui stackable one column grid">
                  <div class="column">
                    <button id="quantaJsonClick" class="ui mini button jsonclick ">Raw Transaction Details <i class="down angle icon"></i></button>
                    <div id="quantaJsonbox" class="ui raised segment jsonbox json unbreakable" style="display: none"></div>
                  </div>
                </div>
      
              </div>
</template>
